<template>
  <Table
    v-if="tableData?.length"
    :table-data="tableData"
    :header="header"
    :config="config"
    :pagination="pagination"
    @handleSelectionChange="handleSelectionChange"
    @handleCurrentChange="handleCurrentChange"
    @handleSizeChange="handleSizeChange"
    @handleCurrentPageChange="handleCurrentPageChange"
    :selectable="(row:any) => row.number > 400"
  >
    <!-- <template #address="val">
      <div>
        {{ val.data }}
      </div>
    </template> -->

    <!-- 展开行的内容 -->
    <template #expand="val">
      <div>
        {{ val.data }}
      </div>
    </template>

    <!-- <template
      #zip1="val"
    >
      <el-button
        type="text"
        size="small"
        @click="handleClick(val.data)"
      >
        ==={{ val.data.date }}
      </el-button>
    </template> -->
    <template
      #btn="val"
    >
      <el-button
        type="text"
        size="small"
        @click="handleClick(val.data)"
      >
        detail
      </el-button>
    </template>
  </Table>
</template>
<script lang="ts" setup>

import { getMergeData } from '@/utils/tableMerge'

/**
 * 注意！注意！注意！
 * selectable是多选框是否禁用的方法，这个方法不能写在js里，只能写在HTML里
 */

import { InitData } from '@/components/common/typing/table'

// 按钮返回数据
const handleClick = (data: any) => {
  console.log('click')
  console.log(data)
}
// 多选获取数据
const handleSelectionChange = (data: any) => {
  console.log('handleSelectionChange')
  console.log(data)
}
// 点击获取当前行数据
const handleCurrentChange = (data: any) => {
  console.log('handleCurrentChange')
  console.log(data)
}

/**
 *
  total: number 总共多少条(必填)
  show: boolean 是否显示分页,默认false
  layout?: string 分页的样式
  pageSize?: number[] 可选每页切分多少条，默认[10, 20, 30, 50]
  currentPageSize?: number 当前每页多少条，默认20条
  disabled?: boolean  是否能点
  currentPage?: number 当前第几页，默认第一页
  small?: boolean 是否用small模式，默认false
  background?: boolean 是否有背景，默认false
 */
const pagination = {
  total: 1000,
  layout: 'sizes, prev, pager, next, jumper',
  pageSize: [10, 20, 30, 150],
  currentPageSize: 20,
  disabled: false,
  currentPage: 1,
  small: false,
  background: false
}
/**
 * 每页多少行
 */
const handleSizeChange = (val: number) => {
  console.log('每页多少行=' + val)
}

/**
 * 当前第几页
 */
const handleCurrentPageChange = (val: number) => {
  console.log('当前第几页=' + val)
}
/**
  staticColumn:[
    type:string  expand展开行，展开行的内容用slot显示、selection多选框CheckBox、index序列号
    width:number 宽度
  ]
  singleChoiceHigHlight: Boolean // 单选高亮
  border?: Boolean 是否显示表格线
  searchProp?: string 搜索数据的prop值，要和header数据里的search同时设置
  height?: Number 设置table的高度自动固定表头
  maxHeight?: Number table最大高度并且自动固定表头
  stripe?: Boolean 斑马纹
  showSummary?: Boolean 是否显示合计

  ===========重点=====================
  ranksMerge?: Boolean 是否进行行列合并
  如果要进行行列合并需要调用getMergeData方法重置数据
  initData为table数据
  row为行合并的prop,数组格式，支持多个prop合并
  col为列合并的prop,数组格式，支持一组相邻的两列prop合并
  getMergeData(initData, {
    row: ['id', 'name'],
    col: ['amount1', 'amount2']
  })
  =============注意：展开行和列合并不能同时使用=========
  当staticColumn设置了type: 'expand'展开行是对列合并有影响
 */
const config = {
  staticColumn: [
    // {
    //   type: 'expand',
    //   width: 50
    // },
    {
      type: 'selection',
      width: 50
    },
    {
      type: 'index',
      width: 50
    }
  ],
  singleChoiceHigHlight: true,
  border: true,
  searchProp: 'zip1',
  // height: 250,
  maxHeight: 500,
  stripe: true,
  showSummary: false,
  ranksMerge: true
}

/**
  label: string header显示的值，根据UI设置
  prop?: string 对应的key值，对应接口数据返回的key
  width?: number 宽度设置，可以省略，宽度自适应
  fixed?: boolean|string 固定某一列，一般是第一列和最后一列
  sort?: Boolean 排序
  search?: { 要和config里的searchProp同时设置
    align: string 方位：left、right
    placeholder?: string
    size?: string 搜索框大小
  }
  slotName?: string 设置slotName，内容通过具名插槽填充
  filters?: FilterVal[] 过滤条件
 */

const header = [
  {
    prop: 'date',
    label: 'Date',
    width: 150,
    fixed: true,
    sort: true,
    filters: [
      { text: '2016-05-03', value: '2016-05-03' },
      { text: '2016-05-02', value: '2016-05-02' },
      { text: '2016-05-01', value: '2016-05-01' },
      { text: '2016-05-04', value: '2016-05-04' }
    ]
  },
  {
    prop: 'name',
    label: 'Name',
    fixed: false
  },
  {
    prop: 'state',
    label: 'State',
    width: 150,
    fixed: false
  },
  {
    prop: 'city',
    label: 'City',
    width: 150,
    fixed: false
  },
  {
    prop: 'address',
    label: 'Address',
    width: 350,
    fixed: false
    // slotName: 'address'
  },
  {
    prop: 'zip1',
    label: 'Zip1',
    width: 150,
    sort: false,
    fixed: false
    // slotName: 'zip1'
  },
  {
    prop: 'zip2',
    label: 'Zip2',
    width: 150,
    sort: false,
    fixed: false
  },
  {
    prop: 'number',
    label: 'Number',
    // width: 150,
    sort: true,
    fixed: false
  },
  {
    label: 'Operations',
    width: 150,
    prop: 'operations',
    fixed: 'right',
    slotName: 'btn',
    search: {
      align: 'right',
      placeholder: '输入zip号',
      size: 'small'
    }
  }
]

/**
 * 接口数据
 */
const tableData = ref<InitData[]>()
onMounted(async () => {
  const data = [
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip1: 'CA 90034',
      zip2: 'CA 90074',
      number: 454,
      tag: 'Home'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip1: 'CA 90032',
      zip2: 'CA 90032',
      number: 454,
      tag: 'Office'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip1: 'CA 90036',
      zip2: 'CA 90044',
      number: 424,
      tag: 'Home'
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip1: 'CA 90037',
      zip2: 'CA 90037',
      number: 124,
      tag: 'Office'
    }
  ]
  tableData.value = await getMergeData(data, {
    row: ['state', 'name'],
    col: ['zip1', 'zip2']
  })
})

</script>

<style lang="scss" scoped>

</style>
